<template>
  <div>
    top250
    <hr>
    <div>{{$store.state.will.info}}</div>
    <div>{{$store.state.top.topInfo}}</div>
    <div>{{info}}</div>
    <div>{{topInfo}}</div>
    <div>映射的getters:{{myInfo}}</div>
    <div>原始写法：{{$store.getters['will/myInfo']}}</div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'

export default {
  name: 'TopMovie',
  computed: {
    ...mapState('will', ['info']),
    ...mapState('top', ['topInfo']),
    ...mapGetters('will', ['myInfo'])
  },
  methods: {
    ...mapActions('will', ['showInfo']),
    ...mapActions('top', ['showTopInfo'])
  },
  // 学会使用这种方法-created
  // 可以触发actions，getters，mutations
  created () {
    // 用原始的方式获取getters
    // const myInfo = this.$store.getters['will/myInfo']
    // console.log(myInfo)

    // 触发will模块的action
    this.$store.dispatch('will/showInfo', 'coniqiwa')
    this.$store.dispatch('top/showTopInfo', 'coniqiwa')
    // 基于映射方式触发
    this.showInfo('alligotogozayimasi')
    this.showTopInfo('hello')

    // 了解
    // this['will/showInfo']('hello111')
  }

}
</script>

<style>
</style>
